<template>
  <el-form>
    <el-form-item label="基本信息">
      <el-table
        border
        :data="roadTable"
        style="width: 100%"
        :show-header="false"
      >
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c1 }}</strong>
        </template></el-table-column>
        <el-table-column prop="d1" align="center" />
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c2 }}</strong>
        </template></el-table-column>
        <el-table-column prop="d2" align="center" />
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c3 }}</strong>
        </template></el-table-column>
        <el-table-column prop="d3" align="center" />
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c4 }}</strong>
        </template></el-table-column>
        <el-table-column prop="d4" align="center" />
      </el-table>
    </el-form-item>
    <el-form-item label="车行道信息">
      <el-table
        :data="roadwayTable"
        :span-method="roadwaySpanMethod"
        border
        style="width: 100%"
        :show-header="false"
      >
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c1 }}</strong>
        </template></el-table-column>
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c2 }}</strong>
        </template></el-table-column>
        <el-table-column prop="d1" align="center" />
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c3 }}</strong>
        </template></el-table-column>
        <el-table-column align="center"><template slot-scope="{row}">
          <strong>{{ row.c4 }}</strong>
        </template></el-table-column>
        <el-table-column prop="d2" align="center" />
      </el-table>
    </el-form-item>
  </el-form>
</template>

<script>
import { toDateString } from '@/utils/time-handle'

export default {
  name: 'RoadDetail',
  props: {
    road: {
      type: Object,
      default() {
        return {}
      }
    },
    roadWay: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      roadTable: [
        {
          c1: '道路名称',
          d1: '',
          c2: '设计单位',
          d2: '',
          c3: '路幅宽带范围',
          d3: '',
          c4: '所属乡镇',
          d4: ''
        }, {
          c1: '道路编号',
          d1: '',
          c2: '施工单位',
          d2: '',
          c3: '道路长度',
          d3: '',
          c4: '管理分类',
          d4: ''
        }, {
          c1: '道路走向',
          d1: '',
          c2: '道路等级',
          d2: '',
          c3: '道路面积',
          d3: '',
          c4: '管理单位',
          d4: ''
        }, {
          c1: '起点',
          d1: '',
          c2: '路面等级',
          d2: '',
          c3: 'AADT',
          d3: '',
          c4: '养护单位',
          d4: ''
        }, {
          c1: '终点',
          d1: '',
          c2: '设计时速',
          d2: '',
          c3: '交通量等级',
          d3: '',
          c4: '建造年月',
          d4: ''
        }],
      roadwayTable: [
        {
          c1: '路面',
          c2: '类型',
          d1: '',
          c3: '基层',
          c4: '类型',
          d2: ''
        },
        {
          c1: '',
          c2: '厚度',
          d1: '',
          c3: '',
          c4: '厚度',
          d2: ''
        },
        {
          c1: '侧石',
          c2: '类型',
          d1: '',
          c3: '平石',
          c4: '类型',
          d2: ''
        },
        {
          c1: '',
          c2: '长度',
          d1: '',
          c3: '',
          c4: '长度',
          d2: ''
        },
        {
          c1: '非机动车道宽度范围',
          c2: '左侧',
          d1: '',
          c3: '机动车道宽度范围',
          c4: '',
          d2: ''
        },
        {
          c1: '',
          c2: '右侧',
          d1: '',
          c3: '',
          c4: '',
          d2: ''
        },
        {
          c1: '车道数',
          c2: '',
          d1: '',
          c3: '通行方向',
          c4: '',
          d2: ''
        },
        {
          c1: '车行道面积',
          c2: '',
          d1: '',
          c3: '有无公交车专用车道',
          c4: '',
          d2: ''
        }]
    }
  },
  created() {
    this.convertRoad()
    this.convertRoadway()
  },
  methods: {
    roadwaySpanMethod({ rowIndex, columnIndex }) {
      if ([0, 3].includes(columnIndex)) {
        if ([0, 2, 4].includes(rowIndex)) {
          return [2, 1]
        } else if ([1, 3, 5].includes(rowIndex)) {
          return [0, 0]
        } else {
          return [1, 2]
        }
      } else if (columnIndex === 1) {
        if ([6, 7].includes(rowIndex)) {
          return [0, 0]
        }
      } else if (columnIndex === 4) {
        if ([4, 5, 6, 7].includes(rowIndex)) {
          return [0, 0]
        }
      } else if (columnIndex === 5) {
        if (rowIndex === 4) {
          return [2, 2]
        }
      }
    },
    convertRoad() {
      this.roadTable[0].d1 = this.road.roadName
      this.roadTable[0].d2 = this.road.designUnit
      this.roadTable[0].d3 = this.road.roadWidthRange
      this.roadTable[0].d4 = this.road.township
      this.roadTable[1].d1 = this.road.roadID
      this.roadTable[1].d2 = this.road.constructionUnit
      this.roadTable[1].d3 = this.road.roadLength
      this.roadTable[1].d4 = this.road.managementClassification
      this.roadTable[2].d1 = this.road.roadDirection
      this.roadTable[2].d2 = this.roadTypeFilter(this.road.roadTypeID)
      this.roadTable[2].d3 = this.road.roadArea
      this.roadTable[2].d4 = this.road.managementUnit
      this.roadTable[3].d1 = this.road.startPoint
      this.roadTable[3].d2 = this.road.roadLevel
      this.roadTable[3].d3 = this.road.aadt
      this.roadTable[3].d4 = this.road.maintenanceUnit
      this.roadTable[4].d1 = this.road.endPoint
      this.roadTable[4].d2 = this.road.designedSpeed
      this.roadTable[4].d3 = this.road.trafficLevel
      this.roadTable[4].d4 = toDateString(this.road.constructionDate)
    },
    convertRoadway() {
      if (this.roadWay) {
        this.$message.success('已加载车行道信息')
        this.roadwayTable[0].d1 = this.roadWay.typeAndLengths[1].type
        this.roadwayTable[0].d2 = this.roadWay.typeAndLengths[0].type
        this.roadwayTable[1].d1 = this.roadWay.typeAndLengths[1].length
        this.roadwayTable[1].d2 = this.roadWay.typeAndLengths[0].length
        this.roadwayTable[2].d1 = this.roadWay.typeAndThicknesses[0].type
        this.roadwayTable[2].d2 = this.roadWay.typeAndThicknesses[1].type
        this.roadwayTable[3].d1 = this.roadWay.typeAndThicknesses[0].thickness
        this.roadwayTable[3].d2 = this.roadWay.typeAndThicknesses[1].thickness
        this.roadwayTable[4].d1 = this.roadWay.roadway.leftNonRoadwayWidthRange
        this.roadwayTable[4].d2 = this.roadWay.roadway.roadwayWidthRange
        this.roadwayTable[5].d1 = this.roadWay.roadway.rightNonRoadwayWidthRange
        this.roadwayTable[6].d1 = this.roadWay.roadway.numberOfLanes
        this.roadwayTable[6].d2 = this.roadWay.roadway.trafficDirection
        this.roadwayTable[7].d1 = this.roadWay.roadway.roadwayArea
        this.roadwayTable[7].d2 = this.roadWay.roadway.busLane === 0 ? '无' : '有'
      } else {
        this.roadwayTable = []
      }
    },
    roadTypeFilter(roadType) {
      switch (roadType) {
        case 1: return '快速路'
        case 2: return '主干路'
        case 3: return '广场'
        case 4: return '商业繁华街道'
        case 5: return '重要生产区道路'
        case 6: return '外事活动路线'
        case 7: return '游览路线'
        case 8: return '次干路'
        case 9: return '步行街'
        case 10: return '支路中的商业街道'
        case 11: return '其他支路'
      }
    }
  }
}
</script>

<style scoped>

</style>
